<template>
  <view class="detail-wrap" v-if="info">
    <view class="title">{{ info.title }}</view>
    <view class="user">
      <image class="user__img" :src="(type === 'CAR' ? info.car_user_avatar : info.avatar) || defaultHeader"></image>
      <view class="desc" style="padding-top: 0;">
        <view class="desc-name">{{ (type === 'CAR' ? info.car_user : info.post_user) || 'xxx' }}</view>
        <view class="desc-time">{{ info.created_at }}</view>
      </view>
    </view>

    <!-- 项目说明 -->

    <!-- 维修、培训 -->
    <view
      v-if="type === 'ACTIVITY' || type === 'REPAIR' || type === 'TRAIN' || type === 'CAR'"
      class="desc"
    >
      <view
        class="desc__li"
        style="margin-bottom: 40rpx;"
        v-if="(type === 'ACTIVITY' || type === 'CAR') && countDown > 0"
      >
        <CountDown
          :custom="true"
          :format="countDown > 24 * 60 * 60 * 1000 ? 'DD天HH:mm:ss' : 'HH:mm:ss'"
          :time="countDown"
          @finish="timeEnd"
        >
          <template #countdown="{ days, hours, minutes, seconds }">
            <view v-if="hours && minutes && seconds">
              <text class="prefix">距结束</text>
              <text v-if="days">{{ days }}天</text>
              <text class="time-box">{{ hours }}</text>
              <text class="time-split">:</text>
              <text class="time-box">{{ minutes }}</text>
              <text class="time-split">:</text>
              <text class="time-box">{{ seconds }}</text>
            </view>
          </template>
        </CountDown>
      </view>
      <view class="desc__li" v-if="info.cost_explain && (type === 'REPAIR' || type === 'TRAIN')">
        <view class="desc__li--label" >费用说明：</view>
        <view class="desc__li--value">{{ info.cost_explain }}</view>
      </view>
      <view class="desc__li" v-if="type === 'ACTIVITY' && info.join_amount">
        <view class="desc__li--label">参与人数/招募人数：</view>
        <view class="desc__li--value"
          ><text style="color: #008000;">{{ info.join_amount }} </text>/<text>
            {{ info.recruit_amount }}</text
          ></view
        >
      </view>
      <template v-if="type === 'CAR'">
        <view class="desc__li">
          <view class="desc__li--label">出发地：</view>
          <view class="desc__li--value">{{ info.start_point }}</view>
        </view>
        <view class="desc__li">
          <view class="desc__li--label">目的地区域：</view>
          <view class="desc__li--value">{{ info.destination }}</view>
        </view>
        <view class="desc__li">
          <view class="desc__li--label">出发时间：</view>
          <view class="desc__li--value">{{ info.start_time }}</view>
        </view>
        <view class="desc__li">
          <view class="desc__li--label">费用：</view>
          <view class="desc__li--value">{{ info.cost | changeSub }}元/人</view>
        </view>
        <view class="desc__li">
          <view class="desc__li--label">拼车人数：</view>
          <view class="desc__li--value">{{ info.recruit_amount }}人</view>
        </view>
        <view class="desc__li">
          <view class="desc__li--label">车辆：</view>
          <view class="desc__li--value">{{ info.car_number }}</view>
        </view>
      </template>
      <view class="desc__li" v-if="info.contact">
        <view class="desc__li--label">联系人：</view>
        <view class="desc__li--value">{{ info.contact }}</view>
      </view>
      <view class="desc__li" v-if="info.contact_phone" @tap="handleToCall(info.contact_phone)">
        <view class="desc__li--label">联系电话：</view>
        <view class="desc__li--value">{{ info.contact_phone }}</view>
        <view class="desc__li--icon iconfont icon-mobile"></view>
      </view>
    </view>

    <!-- 内容 -->
    <view class="content" >
      <view class="head-title">内容详情</view>
      <rich-text :nodes="info.content"></rich-text>
    </view>

    <view class="btn-box" v-if="info && loading && (type === 'ACTIVITY' || type === 'CAR')">
      <template v-if="post_status == '2'" >
        <button class="pp-button end-btn" hover-class="pp-button--active" >
          拼车已取消
        </button>
      </template>
      <template v-else-if="status === 'end' || countDown <= 0">
        <button class="pp-button end-btn" hover-class="pp-button--active" >
          {{ type === 'ACTIVITY' ? '活动' : '拼车' }}结束
        </button>
      </template>
      <template v-else>
        <button
          v-if="!join"
          class="pp-button join-btn"
          hover-class="pp-button--active"
          @tap="handleToJoin"
        >
          {{ type === 'ACTIVITY' ? '立即参与' : '参与拼车' }}
        </button>
        <button
          v-else
          class="pp-button cancel-btn"
          hover-class="pp-button--active"
          @tap="handleCancel"
        >
          {{ type === 'ACTIVITY' ? '取消参与' : '取消拼车' }}
        </button>
      </template>
    </view>
  </view>
</template>

<script>
import { ARTICLE_DETAIL, ACTIVITY_JOIN_STATUS, ACTIVITY_JOIN } from '@/api/home';
import { defaultHeader } from '@/tool/static-img';
import { momentDate } from '@/tool';
import CountDown from '@/basic-components/u-count-down/index.vue';

export default {
  components: {
    CountDown,
  },
  data() {
    return {
      defaultHeader,
      id: 0,
      type: '',
      info: null,
      countDown: 0,
      join: false,
      status: '',
      post_status: '',
      loading: false,
    };
  },
  async onLoad({ id, type, post_status }) {
    await this.getBindLoginStatus();
    this.id = id;
    this.type = type;
    if(post_status) {
      this.post_status = post_status;
    }

    // 详情
    this.getDetail(id);

    // 参与情况
    if(type==='ACTIVITY' || type==='CAR'){
      this.joinStatus(id);
    }

  },
  async onShow(option) {
    await this.getBindLoginStatus();
    // 重新登录
    if (option && option.type === 'fromLogin') {
      this.joinStatus(this.id);
    }
  },
  methods: {
    getDetail(id) {
      this.$http.get(`${ARTICLE_DETAIL}/${id}`, {}, {
        showLoading: true
      }).then(res => {
        uni.hideLoading()
        this.info = res.data;
        this.countDown = res.data.left_time;
        this.info.created_at = momentDate(res.data.created_at);
        this.info.start_time = momentDate(res.data.start_time);
      });
    },
    joinStatus(id) {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.loading = true;
        return;
      }
      this.loading = false;
      this.$http
        .post(ACTIVITY_JOIN_STATUS, {
          post_id: id,
        })
        .then(res => {
          this.join = res.data;
          this.loading = true;
        });
    },
    handleToCall(str) {
      uni.makePhoneCall({
        phoneNumber: str,
      });
    },
    timeEnd() {
      // 已结束
      this.status = 'end';
    },
    handleToJoin() {
      const accessToken = uni.getStorageSync('accessToken');
      if (!accessToken) {
        this.$navigate({
          page: 'login',
        });
        return;
      }
      this.$http
        .post(
          ACTIVITY_JOIN,
          {
            post_id: this.id,
            post_type: this.info.post_type,
            status: 1,
          },
          {
            showLoading: true,
          }
        )
        .then(() => {
          setTimeout(() => {
            uni.hideLoading();
          }, 800);
          uni.showToast({
            title: '参与成功！',
            icon: 'success',
          });
          this.join = true;
          this.getDetail(this.id);
        });
    },
    handleCancel() {
      uni.showModal({
        title: '温馨提示',
        content: `确定取消${this.type === 'ACTIVITY' ? '参与' : '拼车'}?`,
        success: res => {
          if (res.confirm) {
            this.cancelActivity();
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
      });
    },
    cancelActivity() {
      this.$http
        .post(
          ACTIVITY_JOIN,
          {
            post_id: this.id,
            post_type: this.info.post_type,
            status: 2,
          },
          {
            showLoading: true,
          }
        )
        .then(() => {
          setTimeout(() => {
            uni.hideLoading();
          }, 800);
          uni.showToast({
            title: '取消成功！',
            icon: 'success',
          });
          this.join = false;
          this.getDetail(this.id);
        });
    },
  },
};
</script>

<style lang="less">
.detail-wrap {
  min-height: 100vh;
  padding: 0 40rpx;
  background-color: #ffffff;
  .title {
    font-size: 32rpx;
    font-weight: 500;
    padding: 40rpx 0 60rpx 0;
    text-align: center;
  }
  /deep/ .prefix {
    margin-right: 12rpx;
  }
  /deep/ .time-box {
    display: inline-block;
    min-width: 36rpx;
    height: 36rpx;
    padding: 0 6rpx;
    line-height: 36rpx;
    text-align: center;
    font-size: 24rpx;
    border-radius: 8rpx;
    color: #ffffff;
    vertical-align: middle;
    background-color: #333333;
  }
  /deep/ .time-split {
    padding: 0 8rpx;
  }
  .user {
    display: flex;
    align-items: center;
    &__img {
      height: 60rpx;
      width: 60rpx;
      margin-right: 16rpx;
      border-radius: 50%;
    }
    .desc {
      &-name {
        font-size: 24rpx;
      }
      &-time {
        font-size: 20rpx;
        color: #999999;
      }
    }
  }
  .desc {
    padding-top: 40rpx;
    &__li {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      &:last-child {
        margin-bottom: 0;
      }
      &--label {
        min-width: 140rpx;
        flex-shrink: 0;
        font-size: 26rpx;
        font-weight: 500;
        text-align: left;
      }
      &--value {
        font-size: 24rpx;
        font-weight: 500;
      }
      &--icon {
        font-size: 28rpx;
        margin-left: 8rpx;
        color: #ff0000;
      }
    }
  }
  .content {
    padding: 40rpx 0 180rpx 0;
    .head-title {
      position: relative;
      font-size: 28rpx;
      margin-bottom: 20rpx;
      color: #999999;
      text-align: center;
      &::before {
        content: '';
        position: absolute;
        left: 40rpx;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 35%;
        height: 1px;
        background-color: #eeeeee;
      }
      &::after {
        content: '';
        position: absolute;
        right: 40rpx;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 35%;
        height: 1px;
        background-color: #eeeeee;
      }
    }
  }
  .clock-box {
    font-size: 28rpx;
    margin-bottom: 30rpx;
  }

  .btn-box {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 136rpx;
    .join-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 710rpx;
      height: 92rpx;
      font-size: 32rpx;
      background-color: #fedd00;
    }
    .cancel-btn {
      width: 710rpx;
      height: 92rpx;
      font-size: 32rpx;
      color: #ffffff;
      background-color: #49c265;
    }
    .end-btn {
      width: 710rpx;
      height: 92rpx;
      font-size: 32rpx;
      color: #666666;
    }
  }
}
</style>
